{% extends 'component/layout.html' %}
{% block title %} {% endblock %}
{% block style %}
<link rel="stylesheet" href="../less/particulars.less">
{% endblock %}
{% block body %}

<div class="page-title">
    <span>产品中心</span>
</div>
<div class="particulars-main">
    <!-- 搜索栏部分 -->
    <div class="product-search">
        <div class="search-text">
            <input type="text" placeholder="输入产品名称">
        </div>
        <span class="button-text">取消</span>
    </div>
    <script>
        $(".button-text").click(function () {
            $(".search-text input").val("");
        })
    </script>
    <div class="product-content">
        <!-- 产品种类 -->
        <div class="product-class">
            <ul class="product-category clearfix">
                <li class="current">
                    <a href="details.html"></a>
                    <span>氢氧化钠</span>
                </li>
                <li>
                    <a href="details.html"></a>
                    <span>氨水</span>
                </li>
                <li>
                    <a href="details.html"></a>
                    <span>双氧水</span>
                </li>
                <li>
                    <a href="details.html"></a>
                    <span>液碱</span>
                </li>
                <li>
                    <a href="details.html"></a>
                    <span>冰醋酸</span>
                </li>
                <li>
                    <a href="details.html"></a>
                    <span>次氯酸钠</span>
                </li>
                <li>
                    <a href="details.html"></a>
                    <span>乙二醇</span>
                </li>
                <li>
                    <a href="details.html"></a>
                    <span>二氯甲烷</span>
                </li>
                <li>
                    <a href="details.html"></a>
                    <span>磷酸</span>
                </li>
                <li>
                    <a href="details.html"></a>
                    <span>氯化钙</span>
                </li>
            </ul>
        </div>
        <!-- 产品详情 -->
        <div class="product-particulars">
            <ul class="particulars-items clearfix">
                <li class="particulars-item">
                    <a href="details.html">
                        <div class="particular-img">
                            <img src="images/product-img1.png" alt="">
                        </div>
                        <div class="particular-name">
                            <span>（精）甲醇</span>
                        </div>
                    </a>
                </li>
                <li class="particulars-item">
                    <a href="details.html">
                        <div class="particular-img">
                            <img src="images/product-img2.png" alt="">
                        </div>
                        <div class="particular-name">
                            <span>醋酸丁酯</span>
                        </div>
                    </a>
                </li>
                <li class="particulars-item">
                    <a href="details.html">
                        <div class="particular-img">
                            <img src="images/product-img3.png" alt="">
                        </div>
                        <div class="particular-name">
                            <span>C9 加氢石油树脂</span>
                        </div>
                    </a>
                </li>
                <li class="particulars-item">
                    <a href="details.html">
                        <div class="particular-img">
                            <img src="images/product-img4.png" alt="">
                        </div>
                        <div class="particular-name">
                            <span>双氧水</span>
                        </div>
                    </a>
                </li>
                <li class="particulars-item">
                    <a href="details.html">
                        <div class="particular-img">
                            <img src="images/product-img5.png" alt="">
                        </div>
                        <div class="particular-name">
                            <span>苯酚</span>
                        </div>
                    </a>
                </li>
                <li class="particulars-item">
                    <a href="details.html">
                        <div class="particular-img">
                            <img src="images/product-img6.png" alt="">
                        </div>
                        <div class="particular-name">
                            <span>二甲苯</span>
                        </div>
                    </a>
                </li>
                <li class="particulars-item">
                    <a href="details.html">
                        <div class="particular-img">
                            <img src="images/product-img7.png" alt="">
                        </div>
                        <div class="particular-name">
                            <span>热熔型路标漆用C5石油树脂</span>
                        </div>
                    </a>
                </li>
                <li class="particulars-item">
                    <a href="details.html">

                        <div class="particular-img">
                            <img src="images/product-img8.png" alt="">
                        </div>
                        <div class="particular-name">
                            <span>冰醋酸</span>
                        </div>
                    </a>
                </li>
                <li class="particulars-item">
                    <a href="details.html">
                        <div class="particular-img">
                            <img src="images/product-img9.png" alt="">
                        </div>
                        <div class="particular-name">
                            <span>松香</span>
                        </div>
                    </a>
                </li>
                <li class="particulars-item">
                    <a href="details.html">
                        <div class="particular-img">
                            <img src="images/product-img10.png" alt="">
                        </div>
                        <div class="particular-name">
                            <span>三乙醇胺</span>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
        <!-- 产品分页 -->
        <!-- <div class="product-pages">
            <span>上一页</span>
            <i>1/5</i>
            <span>下一页</span>
        </div> -->
    </div>
</div>
{% endblock %}
{% block script %}

{% endblock %}